<template>
  <div>
    <div
      class="ect"
      v-for="(item, index) in courses"
      :key="index"
      :id="item.id"
    ></div>
    <div id="derection" class="bing"></div>
    <div class="all-bing">
      <div v-for="(item, index) in courseNumber" :key="index" :id="index"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getDayAndLearn, getDirecAndValue } from "@/services/echart-data";
import { getQueryCourses } from "@/services/course";

export default {
  data() {
    return {
      demoEcharts: "",
      courses: [],
      total: "",
      echarts: [],
      courseNumber: [],
    };
  },
  methods: {
    initEcharts(course, data) {
      // 基于准备好的dom，初始化echarts实例
      let ec = echarts.init(document.getElementById(course.id));
      // 绘制图表
      ec.setOption({
        title: {
          text: course.courseName,
        },
        xAxis: {
          type: "category",
          data: data.day,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.learn,
            type: "line",
          },
        ],
      });
      this.echarts.push(ec);
    },
    initDrection(id, dataList, title) {
      let ec = echarts.init(document.getElementById(id));
      // 绘制图表
      ec.setOption({
        title: {
          text: title,
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "课程数",
            type: "pie",
            radius: "50%",
            data: dataList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
      this.echarts.push(ec);
    },
    getByAdmin() {
      getDirecAndValue().then((res) => {
        this.courseNumber = res.data.data;
        this.initDrection("derection", this.courseNumber, "各方向课程数");
        setTimeout(() => {
          this.courseNumber.forEach((item, index) => {
            this.initDrection(index, item.typeList, item.name + "分类课程数");
          });
        }, 0);
      });
    },
    async loadCourses() {
      const { data } = await getQueryCourses({
        page: 1,
        pageSize: 10000,
        searchName: "",
      });
      if (data.data) {
        // 保存课程信息
        this.courses = data.data.courseInfos;
        this.total = data.data.total;
        this.courses.forEach((item) => {
          getDayAndLearn({ days: 30, courseId: item.id }).then((res) => {
            if (res.data.data) {
              let day = res.data.data.day.map((item) => {
                return item.substring(5);
              });
              res.data.data.day = day;
              this.initEcharts(item, res.data.data);
            }
          });
        });
      }
    },
  },
  mounted() {
    if (localStorage.getItem("userRole") == "teacher") {
      this.loadCourses();
    } else {
      this.getByAdmin();
    }
    // this.initEcharts();
  },
};
</script>
<style lang="scss" scoped>
.ect {
  width: 100%;
  height: 300px;
}
.bing {
  width: 33.333%;
  height: 300px;
}
.all-bing {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  > div {
    width: 30%;
    height: 300px;
  }
}
</style>